<template>
  <!--赋值计算属性computed，将返回的值作为遍历对象-->
  <div v-for="(item, index) in _arr" :key="index">
    <p>姓名：{{ item.name }}</p>
  </div>
</template>
<script>
import {reactive, computed} from 'vue'
export default{
  setup(){
    const state=reactive({
      arr:[
        {
          name:'尼克',
          show:true
        },
        {
          name:'十三',
          show:false
        }
      ]
    })
    //通过computed 属性，过滤出arr中需要展示的项
    const _arr = computed(() => {
      return state.arr.filter(item=>item.show)
    })
    return {state, _arr}
  }
}
</script>